<template>
  <div class="p-4" style="background: white;">
    <div class="lg:flex">
    <!-- <Avatar :src="userinfo.avatar || headerImg" :size="72" class="!mx-auto !block" /> -->
    <div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
      <h1 class="md:text-lg text-md">数据总览</h1>
      <span class="text-secondary"> </span>
    </div>
    <div class="flex flex-1 justify-end md:mt-0 mt-4">
      <div class="flex flex-col justify-center text-right">
        <span class="text-secondary"> 服务器 </span>
        <span class="text-2xl">{{data.servers.length}}</span>
      </div>

      <div class="flex flex-col justify-center text-right md:mx-16 mx-12">
        <span class="text-secondary"> 虚拟机 </span>
        <span class="text-2xl">{{data.vms.length}}</span>
      </div>
      <div class="flex flex-col justify-center text-right md:mr-10 mr-4">
        <span class="text-secondary"> 任务 </span>
        <span class="text-2xl">{{data.jobs.length}}</span>
      </div>
      <div class="flex flex-col justify-center text-right md:mr-10 mr-4">
        <span class="text-secondary"> 调度次数 </span>
        <span class="text-2xl">{{data.jobs.map(j => j.schenum).reduce((x,y) => x + y, 0)}}</span>
      </div>
    </div>
  </div>
    <GrowCard :loading="loading" class="enter-y" />
    <SiteAnalysis class="!my-4 enter-y" :loading="loading" />
    <!-- <div class="md:flex enter-y">
      <VisitRadar class="md:w-1/3 w-full" :loading="loading" />
      <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
      <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
    </div> -->
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import GrowCard from './components/GrowCard.vue'
  import SiteAnalysis from './components/SiteAnalysis.vue'
  import VisitSource from './components/VisitSource.vue'
  import VisitRadar from './components/VisitRadar.vue'
  import SalesProductPie from './components/SalesProductPie.vue'
  import { useDataStore } from '/@/store/modules/data'

  const data = useDataStore()

  const loading = ref(true)

  setTimeout(() => {
    loading.value = false
  }, 1500)
</script>
